{% extends "base.html" %}

{% block title %}线索管理 - 销售线索批量导入{% endblock %}

{% block page_content %}
<div class="container mx-auto px-4 py-6">
    <!-- 面包屑导航 -->
    <nav class="flex mb-6" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="{{ url_for('main.dashboard') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary">
                    <i class="fas fa-home mr-2"></i>
                    首页
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                    <a href="{{ url_for('lead.lead_list') }}" class="text-sm font-medium text-gray-700 hover:text-primary">线索管理</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                    <span class="text-sm font-medium text-gray-500">批量导入</span>
                </div>
            </li>
        </ol>
    </nav>

    <!-- 页面标题 -->
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900">销售线索批量导入</h1>
        <p class="mt-1 text-sm text-gray-500">通过Excel文件批量导入销售线索数据</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- 导入说明 -->
        <div class="lg:col-span-1">
            <div class="bg-white rounded-lg shadow">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">导入说明</h3>
                </div>
                <div class="p-6">
                    <ol class="list-decimal list-inside space-y-2 text-sm text-gray-600">
                        <li>下载导入模板，按照模板格式填写数据</li>
                        <li>确保所有必填字段都已填写完整</li>
                        <li>负责人必须是系统中存在的用户</li>
                        <li>线索状态和优先级必须使用指定的选项</li>
                        <li>上传填写完成的Excel文件</li>
                        <li>系统将验证数据并导入</li>
                    </ol>
                    
                    <div class="mt-6">
                        <a href="{{ url_for('static', filename='templates/lead_import_template.xlsx') }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary hover:bg-blue-700">
                            <i class="fas fa-download mr-2"></i>
                            下载导入模板
                        </a>
                    </div>
                    
                    <div class="mt-6">
                        <h4 class="text-sm font-medium text-gray-900 mb-2">字段说明</h4>
                        <ul class="space-y-1 text-xs text-gray-600">
                            <li><span class="font-medium">线索名称</span> - 必填，线索的名称</li>
                            <li><span class="font-medium">公司名称</span> - 必填，客户公司名称</li>
                            <li><span class="font-medium">线索来源</span> - 必填，如：网站、电话、推荐等</li>
                            <li><span class="font-medium">线索状态</span> - 必填，可选：新线索、跟进中、已转化、已关闭</li>
                            <li><span class="font-medium">优先级</span> - 必填，可选：高、中、低</li>
                            <li><span class="font-medium">负责人</span> - 必填，系统中存在的用户名</li>
                            <li><span class="font-medium">联系人</span> - 可选，主要联系人姓名</li>
                            <li><span class="font-medium">电话</span> - 可选，联系电话</li>
                            <li><span class="font-medium">邮箱</span> - 可选，联系邮箱</li>
                            <li><span class="font-medium">预计成交金额</span> - 可选，数字格式</li>
                            <li><span class="font-medium">预计成交时间</span> - 可选，日期格式：YYYY-MM-DD</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 导入表单 -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-lg shadow">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">导入销售线索</h3>
                </div>
                <div class="p-6">
                    <form method="post" enctype="multipart/form-data">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <div class="mb-6">
                            <label for="import_file" class="block text-sm font-medium text-gray-700 mb-2">选择Excel文件 <span class="text-red-500">*</span></label>
                            <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
                                <div class="space-y-1 text-center">
                                    <i class="fas fa-file-excel text-4xl text-gray-400"></i>
                                    <div class="flex text-sm text-gray-600">
                                        <label for="import_file" class="relative cursor-pointer bg-white rounded-md font-medium text-primary hover:text-blue-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-primary">
                                            <span>上传文件</span>
                                            <input id="import_file" name="import_file" type="file" class="sr-only" accept=".xlsx,.xls" required>
                                        </label>
                                        <p class="pl-1">或拖拽文件到此处</p>
                                    </div>
                                    <p class="text-xs text-gray-500">支持Excel文件（.xlsx, .xls）</p>
                                </div>
                            </div>
                            <p id="file-name" class="mt-2 text-sm text-gray-500 hidden">已选择文件：<span id="selected-file-name"></span></p>
                        </div>

                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 mb-2">导入选项</label>
                            <div class="space-y-2">
                                <div class="flex items-start">
                                    <div class="flex items-center h-5">
                                        <input id="skip_duplicates" name="skip_duplicates" type="checkbox" checked class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded">
                                    </div>
                                    <div class="ml-3 text-sm">
                                        <label for="skip_duplicates" class="font-medium text-gray-700">跳过重复数据</label>
                                        <p class="text-gray-500">如果线索名称和公司名称已存在，则跳过导入</p>
                                    </div>
                                </div>
                                <div class="flex items-start">
                                    <div class="flex items-center h-5">
                                        <input id="send_notification" name="send_notification" type="checkbox" class="focus:ring-primary h-4 w-4 text-primary border-gray-300 rounded">
                                    </div>
                                    <div class="ml-3 text-sm">
                                        <label for="send_notification" class="font-medium text-gray-700">发送通知</label>
                                        <p class="text-gray-500">导入成功后，向负责人发送通知</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="flex justify-end space-x-3">
                            <a href="{{ url_for('lead.lead_list') }}" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                                取消
                            </a>
                            <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-600">
                                开始导入
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- 导入结果 -->
            {% if import_result %}
            <div class="mt-6 bg-white rounded-lg shadow">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">导入结果</h3>
                </div>
                <div class="p-6">
                    <div class="mb-4">
                        <div class="flex items-center">
                            {% if import_result.success %}
                            <div class="flex-shrink-0">
                                <i class="fas fa-check-circle text-green-400 text-2xl"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-green-800">导入成功</h3>
                                <div class="mt-2 text-sm text-green-700">
                                    <p>成功导入 {{ import_result.imported_count }} 条销售线索</p>
                                </div>
                            </div>
                            {% else %}
                            <div class="flex-shrink-0">
                                <i class="fas fa-exclamation-circle text-red-400 text-2xl"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-red-800">导入失败</h3>
                                <div class="mt-2 text-sm text-red-700">
                                    <p>{{ import_result.message }}</p>
                                </div>
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    {% if import_result.errors %}
                    <div class="bg-red-50 border-l-4 border-red-400 p-4 mb-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-exclamation-triangle text-red-400"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-red-800">错误详情</h3>
                                <div class="mt-2 text-sm text-red-700">
                                    <ul class="list-disc pl-5 space-y-1">
                                        {% for error in import_result.errors %}
                                        <li>{{ error }}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    {% if import_result.warnings %}
                    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-exclamation-triangle text-yellow-400"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-yellow-800">警告</h3>
                                <div class="mt-2 text-sm text-yellow-700">
                                    <ul class="list-disc pl-5 space-y-1">
                                        {% for warning in import_result.warnings %}
                                        <li>{{ warning }}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endif %}

                    <div class="mt-6 flex justify-end">
                        <a href="{{ url_for('lead.lead_list') }}" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-blue-600">
                            查看销售线索列表
                        </a>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{{ super() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const fileInput = document.getElementById('import_file');
        const fileNameElement = document.getElementById('file-name');
        const selectedFileNameElement = document.getElementById('selected-file-name');
        
        fileInput.addEventListener('change', function(e) {
            if (e.target.files.length > 0) {
                selectedFileNameElement.textContent = e.target.files[0].name;
                fileNameElement.classList.remove('hidden');
            } else {
                fileNameElement.classList.add('hidden');
            }
        });
        
        // 拖拽上传功能
        const dropZone = document.querySelector('.border-dashed');
        
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropZone.addEventListener(eventName, preventDefaults, false);
        });
        
        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        ['dragenter', 'dragover'].forEach(eventName => {
            dropZone.addEventListener(eventName, highlight, false);
        });
        
        ['dragleave', 'drop'].forEach(eventName => {
            dropZone.addEventListener(eventName, unhighlight, false);
        });
        
        function highlight() {
            dropZone.classList.add('border-primary', 'bg-blue-50');
        }
        
        function unhighlight() {
            dropZone.classList.remove('border-primary', 'bg-blue-50');
        }
        
        dropZone.addEventListener('drop', handleDrop, false);
        
        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;
            
            if (files.length > 0) {
                fileInput.files = files;
                selectedFileNameElement.textContent = files[0].name;
                fileNameElement.classList.remove('hidden');
            }
        }
    });
</script>
{% endblock %}